<template>
  <!-- 处置结果dialog-->
  <el-dialog
    title="处置结果"
    :visible.sync="handleResult.isHandleResult"
    :before-close="resetFun"
    class="dialog-class1"
    @opened="openFun"
    :z-index="2000"
  >
    <el-form ref="form" label-width="120px">
      <!--      <el-row>-->
      <!--        <el-col :span="12">-->
      <!--          <el-form-item label="处置部门：" class="small">-->
      <!--            <el-input size="small" v-model="handleResult.process.orgName" :disabled="true"></el-input>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row>
        <!-- <el-col :span="12" class="style1">
          <el-form-item label="处置人员：" class="small">
            <el-input
              size="small"
              v-model="handleResult.process.processName"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col> -->
        <!--        <el-col :span="12">-->
        <!--          <el-form-item label="接收时间：" class="small">-->
        <!--            <el-input size="small" v-model="handleResult.process.sendOrderTime" :disabled="true"></el-input>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <el-col :span="12" class="style1">
          <el-form-item label="处置完成时间：" class="small">
            <el-input
              size="small"
              v-model="handleResult.process.processOrderTime"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" class="style1">
          <el-form-item label="是否完成：" class="small">
            <el-input
              size="small"
              v-model="isFinsh"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--      <el-row>-->
      <!--        <el-col :span="22">-->
      <!--          <el-form-item label="附件：" prop="date" class="small">-->
      <!--            <el-image-->
      <!--              v-for="(item, index) in handleResult.imgs"-->
      <!--              :key="index+'1'"-->
      <!--              style="width: 150px; height: 150px"-->
      <!--              :src="item.resourceUrl"-->
      <!--              :preview-src-list="[item.resourceUrl]"-->
      <!--              :z-index="2010"-->
      <!--            >-->
      <!--            </el-image>-->
      <!--            <video v-for="(item, index) in handleResult.videos" :key="index" :src="item.resourceUrl" controls class="video"-->
      <!--                   style="width: 150px; height: 150px"></video>-->
      <!--          </el-form-item>-->
      <!--        </el-col>-->
      <!--      </el-row>-->
      <el-row>
        <el-col :span="24">
          <el-form-item label="图片：" prop="date" class="small">
            <el-carousel trigger="click">
              <el-carousel-item
                v-for="(item, index) in handleResult.imgs"
                :key="index + '1'"
              >
                <el-image
                  :src="item.resourceUrl"
                  :preview-src-list="[item.resourceUrl]"
                  :z-index="2010"
                ></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="视频：" prop="date" class="small">
            <video
              v-for="(item, index) in handleResult.videos"
              :key="index"
              :src="item.resourceUrl"
              controls
              autoplay
              class="video"
              :z-index="2010"
              style="width: 100%; height: 200px"
            ></video>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="处置结果：" class="small">
            <el-input
              type="textarea"
              v-model="handleResult.process.processOpinion"
              placeholder="请输入..."
              rows="8"
              size="small"
              :disabled="true"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row
        v-if="
          handleResult.process.voice != null && handleResult.process.voice != ''
        "
      >
        <el-col :span="24" id="voice_id">
          <el-form-item label="录音：" class="small">
            <div class="audioStyle">
              <i
                v-if="!isPlay"
                @click="autoPlay()"
                class="iconfont icon-bofang2"
                style="font-size: 14px; margin-left: 10px; cursor: pointer"
              ></i>
              <i
                v-else
                @click="autoPause()"
                class="iconfont icon-bofang1"
                style="font-size: 14px; margin-left: 10px; cursor: pointer"
              ></i>
              <span style="font-size: 14px; float: right; margin-right: 10px">{{
                audioTimeStr()
              }}</span>
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <audio
      id="myAudioid"
      style="height: 0px !important; width: 0px"
      :src="handleResult.process.voice"
      controls="controls"
    ></audio>
  </el-dialog>
</template>

<script>
export default {
  name: "handleResultDialog",
  data() {
    return {
      isPlay: false,
      audioLength_original: 0,
      audioLength: 0,
      audioInterval: null,
      isFinsh: "是",
    };
  },
  props: {
    handleResult: {
      type: Object,
      default: {},
    },
  },
  methods: {
    openFun() {
      this.getAudioTime();
    },
    getAudioTime() {
      let myAuto = document.getElementById("myAudioid");
      let _this = this;
      if (myAuto) {
        myAuto.load();
        myAuto.oncanplay = function () {
          // console.log("音乐时长", myAuto.duration);//音乐总时长
          //处理时长
          let time = myAuto.duration;
          //分钟
          let minute = time / 60;
          let minutes = parseInt(minute);
          if (minutes < 10) {
            minutes = "0" + minutes;
          }
          //秒
          let second = time % 60;
          let seconds = Math.round(second);
          if (seconds < 10) {
            seconds = "0" + seconds;
          }
          _this.audioLength = parseInt(minutes) * 60 + Math.round(seconds);
          _this.audioLength_original = _this.audioLength;
          // console.log('处理音乐时长', minutes + "：" + seconds);
        };
      } else {
        setTimeout(() => {
          this.getAudioTime();
        }, 500);
      }
    },
    audioTimeStr() {
      let minute = this.audioLength / 60;
      let minutes = parseInt(minute);
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      //秒
      let second = this.audioLength % 60;
      let seconds = Math.round(second);
      if (seconds < 10) {
        seconds = "0" + seconds;
      }
      return minutes + "：" + seconds;
    },
    autoPlay() {
      let myAuto = document.getElementById("myAudioid");
      myAuto.play();
      let _this = this;
      _this.audioInterval = setInterval(() => {
        if (_this.audioLength == 0) {
          _this.audioLength = _this.audioLength_original;
          _this.isPlay = false;
          clearInterval(_this.audioInterval);
          return;
        }
        _this.audioLength--;
      }, 1000);
      this.isPlay = true;
    },
    autoPause() {
      let myAuto = document.getElementById("myAudioid");
      myAuto.pause();
      let _this = this;
      clearInterval(_this.audioInterval);
      this.isPlay = false;
    },
    resetFun() {
      this.$emit("handleResultCancelFun", false);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-row {
  margin-bottom: 1.5%;
}

/deep/ .el-upload--picture-card {
  border-radius: 5px;
}
/deep/ .style1 .el-form-item label {
  height: 40px !important;
  line-height: 40px !important;
}
/deep/ .el-image {
  display: contents !important;
}
.audioStyle {
  width: 150px;
  height: 32px;
  background: #f2f5f8;
  border-radius: 20px;
  border: 1px solid #cddbe6;
  line-height: 32px;
  color: #98a0a7;
}
#voice_id label {
  height: 32px;
  line-height: 32px;
}
</style>